<template>
  <div class="el-page1  el-position">
    <div class="content">
      <div class="left-content">
        <el-card class="table-card" shadow="always">
          <div class="search-box">
            <el-input size="mini" v-model="clientName" placeholder="请输入客户姓名查询"></el-input>
            <el-button class="addButton" type="primary" size="mini" @click="searchList">搜索</el-button>
          </div>
          <div class="table-box">
            <el-table :data="tableData" border style="width: 100%" @row-click="handleDetail">
              <el-table-column prop="orderNumber" label="订单号" width="180">
              </el-table-column>
              <el-table-column prop="clientName" label="客户名称" width="130">
              </el-table-column>
            </el-table>
          </div>
          <div class="el-descriptions__header">
            <div class="el-descriptions__title">详细信息</div>
            <div class="el-descriptions__extra"></div>
          </div>
          <div class="el-descriptions__body">
            <div class="el-descriptions-item el-descriptions-top">
              <div class="el-descriptions-title"><i class="el-icon-edit"></i>订单号</div>
              <div class="el-descriptions-split"></div>
              <div class="el-descriptions-name">{{ clientInfo.orderNumber }}</div>
            </div>
            <div class="el-descriptions-item">
              <div class="el-descriptions-title"><i class="el-icon-edit"></i>客户名称</div>
              <div class="el-descriptions-split"></div>
              <div class="el-descriptions-name">{{ clientInfo.clientName }}</div>
            </div>
            <div class="el-descriptions-item">
              <div class="el-descriptions-title"><i class="el-icon-edit"></i>司机名称</div>
              <div class="el-descriptions-split"></div>
              <div class="el-descriptions-name">{{ clientInfo.driverName }}</div>
            </div>
            <div class="el-descriptions-item">
              <div class="el-descriptions-title"><i class="el-icon-edit"></i>手机号</div>
              <div class="el-descriptions-split"></div>
              <div class="el-descriptions-name">{{ clientInfo.phone }}</div>
            </div>
            <div class="el-descriptions-item">
              <div class="el-descriptions-title"><i class="el-icon-edit"></i>作物名称</div>
              <div class="el-descriptions-split"></div>
              <div class="el-descriptions-name">{{ clientInfo.cropType }}</div>
            </div>
            <div class="el-descriptions-item">
              <div class="el-descriptions-title"><i class="el-icon-edit"></i>车牌号</div>
              <div class="el-descriptions-split"></div>
              <div class="el-descriptions-name">{{ clientInfo.carNumber }}</div>
            </div>
            <div class="el-descriptions-item">
              <div class="el-descriptions-title"><i class="el-icon-edit"></i>地址</div>
              <div class="el-descriptions-split"></div>
              <div class="el-descriptions-name">{{ clientInfo.clientAddress }}</div>
            </div>
            <div class="el-descriptions-item">
              <div class="el-descriptions-title"><i class="el-icon-edit"></i>填报时间</div>
              <div class="el-descriptions-split"></div>
              <div class="el-descriptions-name">{{ clientInfo.createTime }}</div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="right-content">
        <el-card class="wide-card" shadow="always">
          <div class=" rightCanvasFlex">
            <div class="customerCard">
              <div class="customerCardLeft">
                <i class="el-icon-folder-remove"></i>
              </div>
              <div class="customerCardText">
                <div class="customerCardText1">合同总量</div>
                <div class="customerCardText3">{{ cardInfo.total }} &nbsp;&nbsp; kg</div>
              </div>
            </div>
            <div class="customerCard">
              <div class="customerCardLeft" style="background: #51D351;">
                <i class="el-icon-document"></i>
              </div>
              <div class="customerCardText">
                <div class="customerCardText1">已运总量</div>
                <div class="customerCardText3">{{ cardInfo.yun }} &nbsp;&nbsp; kg</div>
              </div>
            </div>
            <div class="customerCard">
              <div class="customerCardLeft" style="background: #FFA94C;">
                <i class="el-icon-picture-outline-round"></i>
              </div>
              <div class="customerCardText">
                <div class="customerCardText1">剩余总量</div>
                <div class="customerCardText3">{{ cardInfo.yu }} &nbsp;&nbsp; kg</div>
              </div>
            </div>
          </div>
        </el-card>
        <el-card class="narrow-card" shadow="always">
          <div style="display: flex;justify-content: space-between;">
            <div class="rightCanvas">
              <div class="chartMain0">
                <div class="titleLine"></div>
                <div class="titleText">仓库销售统计</div>
              </div>
              <div class="contentCanvas">
                <div class="echart-dom" id="echart2" v-if="this.cardInfo.series && this.cardInfo.series.length"></div>
                <!-- <el-empty description=""></el-empty> -->
              </div>
            </div>
          </div>

        </el-card>
        <el-card class="margin-card" shadow="always">
          <div class="rightCanvas">
            <div class="contentCanvas content-flex">
              <div class="content-item">
                <div class="chartMain0">
                  <div class="titleLine"></div>
                  <div class="titleText title-flex">
                    <span>不同品质作物销售统计</span>
                    <div class="searchCard">
                      <el-select class="shadowInput" size="mini" v-model="pz2" placeholder="请选择作物名称"
                        @change="handlepz2">
                        <el-option v-for="item in cropList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                </div>
                <div class="insideCanvas">
                  <div class="echart-small" id="cropPz2" v-if="pz2List.length"></div>
                  <el-empty description="暂无数据"></el-empty>
                </div>
              </div>
              <div class="content-item">
                <div class="chartMain0">
                  <div class="titleLine"></div>
                  <div class="titleText title-flex">
                    <span>不同类别作物销售统计</span>
                    <div class="searchCard">
                      <el-select class="shadowInput" size="mini" v-model="lb" placeholder="请选择作物名称" @change="handlelb">
                        <el-option v-for="item in cropList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                </div>
                <div class="insideCanvas">
                  <div class="echart-small" id="cropLb" v-if="lbList.length"></div>
                  <el-empty description="暂无数据"></el-empty>
                </div>
              </div>
              <div class="content-item">
                <div class="chartMain0">
                  <div class="titleLine"></div>
                  <div class="titleText title-flex">
                    <span>不同品种作物销售统计</span>
                    <div class="searchCard">
                      <el-select class="shadowInput" size="mini" v-model="pz" placeholder="请选择作物名称" @change="handlepz">
                        <el-option v-for="item in cropList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                </div>
                <div class="insideCanvas">
                  <div class="echart-small" id="cropPz" v-if="pzList.length">
                  </div>
                  <el-empty description="暂无数据"></el-empty>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </div>

    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { filterSelect } from '@/utils/methods'
import { tableApi, getWareNwApi, getCropNameApi2, getCropQualityApi, getCropVarietyApi, getCropCategoryApi } from '@/api/statisticalReport'
import TableCom from '@/components/TableCom'
export default {
  components: {
    TableCom
  },
  data() {
    return {
      cropList: [],
      pz2: '',
      pz: '',
      lb: '',
      clientName: '',
      clientInfo: {},
      cardInfo: {},
      tableHead: [{
        title: '订单号',
        prop: 'orderNumber'
      }, {
        title: '客户名称',
        prop: 'clientName'
      }],
      tableData: [],
      pz2List: [],
      pzList: [],
      lbList: []
    }
  },
  methods: {
    // 获取作物名称
    async handleGetCropName() {
      let res = await getCropNameApi2({ farmCode: this.$farmCode })
      if (res.data && res.data.length) {
        this.cropList = filterSelect(res.data)
        this.pz2 = this.cropList[0].value
        this.pz = this.cropList[0].value
        this.lb = this.cropList[0].value
      } else {
        this.cropList = []
        this.pz2 = ''
        this.pz = ''
        this.lb = ''
      }
      Promise.all([
        this.handlepz2(),
        this.handlepz(),
        this.handlelb()
      ])
      // this.handleGetCropEchart()
    },
    // 获取表格
    async getList() {
      let res = await Promise.all([
        tableApi({ farmCode: this.$farmCode, clientName: this.clientName }),
        getWareNwApi({ farmCode: this.$farmCode }),
        this.handleGetCropName()
      ])
      this.tableData = res[0].data
      this.clientInfo = res[0].data[0]
      this.cardInfo = res[1].data
      this.$nextTick(() => {
        if (this.cardInfo.series && this.cardInfo.series.length) {
          this.handleEchart1(this.cardInfo.xAxis.data, this.cardInfo.series, 'echart2')
        }
      })
    },
    // 搜索表格
    async searchList() {
      let res = await tableApi({ farmCode: this.$farmCode, clientName: this.clientName })
      this.tableData = res.data
    },
    // 获取详情
    handleDetail(row) {
      this.clientInfo = row
    },
    // 各仓销售净重累积统计
    handleEchart1(arrX, list, dom) {
      const chartDom = document.getElementById(dom);
      const myChart = echarts.init(chartDom);
      // if (myChart != null && myChart != '' && myChart != undefined) {
      //   myChart.dispose()
      // }
      const series = list.map(item => {
        return {
          name: item.name,
          barWidth: '10',
          data: item.data,
          type: 'bar',
          // stack: 'total',
          showBackground: false,
          backgroundStyle: {
            // 背景色
            color: "rgba(255,255,255,0.1)",
          },
        }
      })
      let option;
      option = {
        title: {
          show: true,
          subtext: 'kg',
          left: '120',
          subtextStyle: {
            fontSize: 12,
            color: '#888'
          }
        },
        tooltip: {
          // formatter: '{a} : {c}kg<br />{a1}: {c1}kg',
          formatter: function (params) {
            let tooltipContent = ''
            for (let i = 0; i < params.length; i++) {
              tooltipContent += params[i].seriesName + ':' + params[i].value + 'kg' + '<br />'
            }
            return tooltipContent;
          },
          trigger: 'axis',
          textStyle: {
            fontSize: 12,
            color: '#fff'
          },
          axisPointer: {
            type: 'cross'
          },
          borderWidth: 0,
          backgroundColor: 'rgba(0, 0, 0, 0.6)', // 设置背景色为黑色，透明度为0.8
          bodyFontSize: 14, // 设置文字大小
          bodyFontColor: '#fff', // 设置文字颜色为白色
        },
        color: ['#64c0ff', '#91e5d6', '#fb9bab'],
        legend: {
          bottom: '5',
          itemWidth: 20, // 图例标记的宽度
          itemHeight: 10, // 图例标记的高度
        },
        grid: {
          left: '10%',  // 网格距离容器左侧的距离
          right: '10%', // 网格距离容器右侧的距离
          top: '13%',      // 网格距离容器顶部的距离
          bottom: '25%'    // 网格距离容器底部的距离
        },
        xAxis: {
          type: 'category',
          data: arrX,
          axisLabel: {
            show: true,
            color: '#888888',
            fontSize: 14,
            interval: 0
          },
          axisTick: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              interval: 0,
              color: '#fff',
              opacity: 0.0

            },
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {  // 坐标轴在 grid 区域中的分隔线
            lineStyle: { // 分隔线
              type: 'dashed', // 线的类型
              color: '#f1f1f1'
            }
          },
          axisLabel: {
            show: true,
            color: '#888888',
            fontSize: 14,
            interval: 0,
          },
        },
        series: series
      };

      option && myChart.setOption(option);
    },
    // 品质
    async handlepz2() {
      let res = await getCropQualityApi({ farmCode: this.$farmCode, cropType: this.pz2 })
      this.pz2List = res.data.map(item => {
        return {
          name: item.name,
          value: item.total
        }
      })
      if (this.pz2List.length) {
        this.$nextTick(() => {
          this.handlePz2(this.pz2List)
        })
      }
    },
    // 品种
    async handlepz() {
      let res = await getCropVarietyApi({ farmCode: this.$farmCode, cropType: this.pz })
      this.pzList = res.data.map(item => {
        return {
          name: item.name,
          value: item.total
        }
      })
      if (this.pzList.length) {
        this.$nextTick(() => {
          this.handlePz(this.pzList)
        })
      }
    },
    // 类别
    async handlelb() {
      let res = await getCropCategoryApi({ farmCode: this.$farmCode, cropType: this.lb })
      this.lbList = res.data.map(item => {
        return {
          name: item.name,
          value: item.total
        }
      })
      if (this.lbList.length) {
        this.$nextTick(() => {
          this.handleLb(this.lbList)
        })
      }
    },
    // 不同品质作物
    handlePz2(list) {
      const chartDom = document.getElementById('cropPz2');
      const myChart = echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}kg',
          borderWidth: 0,
          backgroundColor: 'rgba(0, 0, 0, 0.6)', // 设置背景色为黑色，透明度为0.8
          textStyle: {
            fontSize: 12,
            color: '#fff'
          },
        },
        legend: {
          bottom: '0%',
          left: 'center',
          itemWidth: 10, // 图例标记的宽度
          itemHeight: 10, // 图例标记的高度
          textStyle: {
            color: '#888'
          }
        },
        color: ['#fb9bab', '#91e5d6', '#64c0ff'],
        series: [
          {
            type: 'pie',
            radius: '60%',
            data: list,
            emphasis: {
              scale: true, // 开启放大动画
              scaleSize: 15, // 放大的程度
            },
            label: {
              color: '#888'
            },
            labelLine: {
              length: 20, // 标签线长度
              length2: 30 // 控制第二段线长，一般不用设置，这个就是控制线段最长
            },
          }
        ]
      };

      option && myChart.setOption(option);
    },
    // 不同品种作物
    handlePz(list) {
      const chartDom = document.getElementById('cropPz');
      const myChart = echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}kg',
          borderWidth: 0,
          backgroundColor: 'rgba(0, 0, 0, 0.6)', // 设置背景色为黑色，透明度为0.8
          textStyle: {
            fontSize: 12,
            color: '#fff'
          },
        },
        legend: {
          bottom: '0%',
          left: 'center',
          itemWidth: 10, // 图例标记的宽度
          itemHeight: 10, // 图例标记的高度
          textStyle: {
            color: '#888'
          }
        },
        color: ['#64c0ff', '#91e5d6', '#fb9bab'],
        series: [
          {
            type: 'pie',
            radius: '60%',
            data: list,
            emphasis: {
              scale: true, // 开启放大动画
              scaleSize: 15, // 放大的程度
            },
            label: {
              color: '#888'
            },
            labelLine: {
              length: 20, // 标签线长度
              length2: 30 // 控制第二段线长，一般不用设置，这个就是控制线段最长
            },
          }
        ]
      };

      option && myChart.setOption(option);
    },
    // 不同类别作物
    handleLb(list) {
      const chartDom = document.getElementById('cropLb');
      const myChart = echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}kg',
          borderWidth: 0,
          backgroundColor: 'rgba(0, 0, 0, 0.6)', // 设置背景色为黑色，透明度为0.8
          textStyle: {
            fontSize: 12,
            color: '#fff'
          },
        },
        legend: {
          bottom: '0%',
          left: 'center',
          itemWidth: 10, // 图例标记的宽度
          itemHeight: 10, // 图例标记的高度
        },

        series: [
          {
            type: 'pie',
            color: ['#91e5d6', '#64c0ff', '#fb9bab'],
            radius: '60%',
            data: list,
            emphasis: {
              scale: true, // 开启放大动画
              scaleSize: 15, // 放大的程度

            },
            label: {
              color: '#888'
            },
            labelLine: {
              length: 20, // 标签线长度
              length2: 30 // 控制第二段线长，一般不用设置，这个就是控制线段最长
            },
          }
        ]
      };

      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.getList()
  }
}
</script>

<style lang='scss' scoped>
.el-page1 {
  width: 100%;
  height: calc(100vh - 70px);


  ::v-deep .el-card__body {
    padding: 10px !important;
    // align-items: center;
    height: 100%;
  }

  .content {
    display: flex;
    justify-content: space-between;

    .left-content {
      width: 20%;
      height: calc(100vh - 70px);

      .table-card {
        height: calc(100vh - 70px);

        .search-box {
          display: flex;
          align-items: center;

          .addButton {
            width: 56px;
            height: 28px;
            border-radius: 20px;
            margin-left: 10px;
          }
        }

        .table-box {
          margin: 10px 0;
          width: 100%;
          height: 53vh;
          overflow-y: auto;
        }

        .el-descriptions__header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20px;
          color: #686868 !important;

          .el-descriptions__title {
            font-weight: 700;
          }
        }

        .el-descriptions__body {
          .el-descriptions-item {
            width: 100%;
            border-left: 1px solid #e4e4e4;
            border-right: 1px solid #e4e4e4;
            border-bottom: 1px solid #e4e4e4;
            display: flex;
            align-items: center;
            height: 30px;

            .el-descriptions-split {
              width: 1px;
              height: 100%;
              background-color: #e4e4e4;
            }

            .el-descriptions-title {
              width: calc(40% - 1px);
              color: #909399;
              background: #fafafa;
              padding: 6px 10px;
              font-size: 12px;

              i {
                margin-right: 3px;
              }
            }

            .el-descriptions-name {
              width: 60%;
              color: #606266;
              background: #fafafa;
              padding: 6px 10px;
              font-size: 12px;
            }
          }

          .el-descriptions-top {
            border-top: 1px solid #e4e4e4;
          }
        }
      }
    }

    .right-content {
      width: 78%;
      height: calc(100vh - 70px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .totalLeft {
      width: 30%;
      height: 300px;

      .totalLeftImg {
        position: relative;
        width: 100%;
        height: 120px;

        .svg-icon {
          position: absolute;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 0;
        }

        .totalLeftText {
          position: absolute;
          top: 20%;
          left: 10%;
          z-index: 1;
          color: #fff;

          .totalLeftTextLine1 {
            font-size: 16px;
          }

          .totalLeftTextLine2 {
            font-size: 32px;
            font-weight: 500;

            .sub {
              font-size: 12px;
            }
          }

        }
      }
    }

    .shuline {
      width: 1px;
      height: 280px;
      margin: 0 3px;
      background: #d1dbe5;
    }

    .rightCanvas {
      height: 300px;
      // margin: 0 20px;
      width: 100%;

      .chartMain0 {
        width: 100%;
        height: 3.2vh;
        overflow: hidden;

        .titleLine {
          width: 4px;
          height: 100%;
          position: relative;
          float: left;
          background: #16745e;
        }

        .titleText {
          color: #4f4f4f;
          font-size: .9em;
          font-weight: 700;
          // margin: 0 1.5vw;
          padding: 0 1vw;
          line-height: 3vh;
        }

        .title-flex {
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 3.2vh;
        }
      }

      .contentCanvas {
        width: 100%;
        height: calc(315px - 3vh);

        .echart-dom {
          width: 100%;
          height: 100%;
        }
      }

      .content-flex {
        display: flex;
        align-items: center;
        justify-content: space-around;

        .content-item {
          width: 33%;
          height: 95%;

          .item-title {
            height: 10%;
            line-height: 30px;
            text-align: center;
            color: #0e7b67;
            font-size: 15px;
            font-weight: 700;
          }

          .insideCanvas {
            width: 100%;
            height: 100%;

            .echart-small {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }

    .rightCanvasFlex {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 100%;

      .customerCard {
        width: 25%;
        height: 90%;
        margin: .5% 4.16667%;
        position: relative;
        float: left;
        background: #fff;
        border-radius: 5px;
        color: #666;
        -webkit-box-shadow: 0 2px 7px #8d8d8d;
        box-shadow: 0 2px 7px #8d8d8d;
        overflow: hidden;
        display: flex;

        .customerCardLeft {
          width: 34%;
          height: 100%;
          background: rgb(115, 160, 250);
          display: flex;
          align-items: center;
          justify-content: center;

          i {
            color: #fff;
            font-size: 50px;
          }
        }

        .customerCardText {
          width: 66%;
          height: auto;

          .customerCardText1 {
            font-size: 1.5em;
            font-weight: bold;
            text-align: center;
            padding: 13px 0;
          }

          .customerCardText3 {
            font-size: 1em;
            text-align: center;
          }
        }
      }
    }

    .wide-card {
      width: 100%;
      height: 15%;
    }

    .narrow-card {
      width: 100%;
      height: 40%;
    }

    .margin-card {
      width: 100%;
      height: 40%;
    }

    ::v-deep .el-card.is-always-shadow {
      box-shadow: 0 2px 7px #8d8d8d;
    }
  }

}

::v-deep.el-table th {
  font-size: 13px;
  background: rgb(101, 192, 175);
  color: rgb(255, 255, 255);
  height: 30px;
  padding: 0;
}

::v-deep.el-table--border td {
  height: 30px;
  padding: 0;
  font-size: 12px;
  color: rgb(87, 87, 87);
}

::v-deep .el-table .cell {
  text-align: center;
  white-space: nowrap;
  /* 防止文字换行 */
  overflow: visible;
  /* 使内容溢出时可见 */
  text-overflow: clip;
  /* 不使用省略号 */
}
</style>
